<template>
    <div>
         <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 卡片视图 -->
         <el-card>
              <!-- 搜索 添加 -->
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getRightsList">
                        <el-button type="success" slot="append" icon="el-icon-search" @click="getRightsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="success">批量导出</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="danger">批量删除</el-button>
                </el-col>
                </el-col :span="4">
                    <el-button type="primary" style="float: right;margin-right: 40px;">添加权限</el-button>
                </el-col>
            </el-row>
             <el-table 
                ref="rightsTable"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="rightsList" 
                @selection-change="handleSelectionChange"
                header-row-class-name="table_header" 
                :header-cell-style="table_header" 
                :row-key="getRowKeys"
                border 
                stripe
                >
                 <el-table-column type="selection" :reserve-selection="true"></el-table-column>
                 <el-table-column type="index" label="序号" width="100px" align="center"></el-table-column>
                 <el-table-column label="权限名称" prop="name" align="center"></el-table-column>
                 <el-table-column label="权限路径" prop="path" align="center"></el-table-column>
                 <el-table-column label="权限等级" prop="level" align="center">
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.level === 0">一级</el-tag>
                        <el-tag type="success" v-else-if="scope.row.level === 1">二级</el-tag>
                        <el-tag type="danger" v-else>三级</el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" align="center" min-width="100px">
                    <template slot-scope="scope">
                        <el-button
                        type="primary"
                        icon="el-icon-edit"
                        size="mini"
                        circle
                        @click="showEditDialog(scope.row.id)"
                        ></el-button>
                        <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        circle
                        @click="removeUserById(scope.row.id)"
                        ></el-button>
                        <el-tooltip
                        class="item"
                        effect="dark"
                        content="角色分配"
                        :enterable="false"
                        placement="top"
                        >
                        <el-button
                            type="warning"
                            icon="el-icon-setting"
                            size="mini"
                            circle
                            @click="showSetRole(scope.row)"
                        ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
             </el-table>
              <!-- 分页区域 -->
            <div class="pager-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="total"
                    background
                    hide-on-single-page
                ></el-pagination>
            </div>
         </el-card>
    </div>
</template>

<script>
export default {
    data () {
    return {
      // 权限列表
        queryInfo: {
            query: '',
            // 当前页数
            pageNum: 1,
            // 每页显示多少数据
            pageSize: 10,
        },
        rightsList: [],
        total: 0,
        addDialogVisible: false,
        loading: true,
        multipleSelection: [],
        value: '',
        }
    },
    created () {
        this.getRightsList()
    },
    methods: {
        getRowKeys(row){//翻页也保存勾选状态
            return row.id;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        table_header(row, column, rowIndex, columnIndex){
            return 'background-color: #409EFF; color: white'
        },
          // 监听 pagesize改变的事件
        handleSizeChange (newSize) {
            // console.log(newSize)
            this.queryInfo.pageSize = newSize
            this.getRightsList()
        },
        // 监听 页码值 改变事件
        handleCurrentChange (newSize) {
            // console.log(newSize)
            this.queryInfo.pageNum = newSize
            this.getRightsList()
        },
        async getRightsList () {
            var v1 = this
            const { data: res, status: status } = await this.axios.get('permissions/list', {params: v1.queryInfo})
            if (status !== 200) {
                return this.$message.error('获取权限列表失败！')
            }
            this.rightsList = res.data
            this.total = res.total
            this.loading = false
        }
    }
}
</script>
<style lang="less" scoped>
</style>